<template>
	<view class="dataCenter">
		<view class="backgroundImage" v-if="rechargeStatistics">
			<view style="color: rgba(255, 255, 255, 0.5);" class="">
				累计用户(名)
			</view>
			<view style="color: #fff;font-size: 40rpx;" class="margin-top_20rpx font-weight_bold ">
				{{rechargeStatistics.total_user_count}}
			</view>
			<view class="flex-around-start margin-top_50rpx dataDetails">
				<view class="flex-column" v-for="(item,i) in dataDetails" :key="i">
					<view class="margin-bottom_10rpx">
						<text style="color: #fff;" v-if="item.text!='累计充值订单'">￥</text>
						<text style="color: #fff;font-size: 28rpx;">{{(String(item.number))}}</text>
					</view>
					<view style="color: #fff;font-size: 28rpx;">
						{{item.text}}
					</view>
				</view>

			</view>
		</view>
		<view class="dataCenterContainer">
			<view>
				<view class="rechargeStatistics flex-between">
					<view class=" flex-start-center">
						<view class="line margin-right_16rpx">

						</view>

						<text class="font-weight_bold font-size_30rpx">充值统计</text>

					</view>
					<view class="selectTime flex-align-center">

						<view class="tab " v-for="(item, index) in orderStatusArr" :key="index">
							<view :class="[currentIndex == index ? 'active ' : ''] "
								@click="switchTimeTab(index,'recharge',item)">
								{{ item.value }}
							</view>
						</view>
					</view>
				</view>
				<view class="margin-top_40rpx" v-if="rechargeStatistics">
					<text class="font-weight_bold font40">{{rechargeStatistics.recharge}}</text>
					<text style="color: rgb(51, 51, 51);">元</text>
				</view>
				<view class="flex-wrap-justifyBetween" style="margin-top: 20rpx;">
					<block v-for="(item, i) in otherNavigationList" :key="i">
						<view class="flex-column infoBox">
							<image class="avaterIcon" :src="item.img" mode=""></image>
							<view class="rightContent">
								<view class="authorizationTitle">{{ item.text }}</view>
							</view>
							<view class="rightContent margin-top_10rpx">
								<view class="authorizationTitle" style="color: rgb(0, 124, 255);">
									￥{{ (item.number) }}</view>
							</view>
						</view>

					</block>
					<!-- 图表 -->
					<qiun-data-charts enableScroll type="line" :opts="opts" :chartData="chartData" :ontouch='true' />
				</view>
			</view>
			<!-- 消费统计 -->
			<view class="margin-top_50rpx">
				<view class="rechargeStatistics flex-between">
					<view class=" flex-start-center">
						<view class="line margin-right_16rpx">

						</view>

						<text class="font-weight_bold font-size_30rpx">消费统计</text>

					</view>
					<view class="selectTime flex-align-center">

						<view class="tab " v-for="(item, index) in orderStatusArr" :key="index">
							<view :class="[consumptionIndex == index ? 'active ' : ''] "
								@click="switchTimeTab(index,'consumption',item)">
								{{ item.value }}
							</view>
						</view>
					</view>
				</view>
				<view class="margin_20rpx_0" style="color: rgb(153, 153, 153);">
					本月消费金额</uni-icons>
				</view>
				<view class="margin-top_20rpx" v-if="rechargeStatistics">
					<text class="font-weight_bold font40"
						style="color: rgb(250, 44, 25);">{{rechargeStatistics.month_goods_amount}}</text>
					<text style="color: rgb(250, 44, 25);">元</text>
				</view>

				<view class="consumerStatistics margin-top_40rpx">
					<view class="flex-between  ">
						<view class="flex-column" v-for="(item,i) in consumptionDataDetails" :key="i">
							<view class="margin-bottom_10rpx font-weight_bold">
								<text style="color: rgb(51, 51, 51);">￥</text>
								<text style="color:rgb(51, 51, 51);font-size: 28rpx;">{{(item.number)}}</text>
							</view>
							<view style="color: rgb(102, 102, 102);font-size: 24rpx;">
								{{item.text}}
							</view>
						</view>

					</view>
				</view>
				<!-- 图表 -->
				<qiun-data-charts type="line" enableScroll :opts="opts" :chartData="consumptionData" :ontouch='true' />
			</view>
			<!-- 用户统计 -->
			<view class="margin-top_50rpx ">
				<view class="rechargeStatistics flex-between ">
					<view class=" flex-start-center">
						<view class="line margin-right_16rpx">

						</view>

						<text class="font-weight_bold font-size_30rpx">用户统计</text>

					</view>
					<view class="selectTime flex-align-center ">

						<view class="tab " v-for="(item, index) in orderStatusArr" :key="index">
							<view :class="[uesrIndex == index ? 'active ' : ''] "
								@click="switchTimeTab(index,'user',item)">
								{{ item.value }}
							</view>
						</view>
					</view>
				</view>


				<view class=" margin-top_40rpx " style="padding: 30rpx 46rpx;">
					<view class="flex-between  ">
						<view class="flex-column" v-for="(item,i) in userDataDetails" :key="i">
							<view class="margin-bottom_10rpx font-weight_bold">
								<text style="color: rgb(51, 51, 51);">￥</text>
								<text style="color:rgb(51, 51, 51);font-size: 28rpx;">{{(item.number)}}</text>
							</view>
							<view style="color: rgb(102, 102, 102);font-size: 24rpx;">
								{{item.text}}
							</view>
						</view>

					</view>
				</view>
				<!-- 图表 -->
				<qiun-data-charts type="line" enableScroll :opts="opts" :chartData="userEcharData" :ontouch='true' />
			</view>
			<view class="margin-top_50rpx" style="height: 40px;">

			</view>
		</view>
		<term-picker :visable.sync="pickerVisable" :defaultDate="defaultDate" @confirm="confirm"></term-picker>
		<!-- <view class="foot_box">
			<TabBar :tabIndex="currentIndex" :showMiddleButtonBar="showMiddleButtonBar" @changeItem="changeItem"
				:tabListNum="tabListNum"></TabBar>
		</view> -->
	</view>
</template>

<script>
	import moment from 'moment';
	// import TabBar from '../../components/jinjie-tabbar/jinjie-tabbar.vue'
	export default {
		components: {
			// TabBar
		},

		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				// 统计索引
				currentIndex: 0,
				// 消费索引
				consumptionIndex: 0,
				// 用户索引
				uesrIndex: 0,
				//  1 模版1 2 模版2 3 模版3 4 模版4
				tabListNum: 1,
				showMiddleButtonBar: true,
				defaultDate: [currentDate, currentDate],
				tabIndex: 4,
				// 充值统计时间
				categoriesRecharge: [],
				// 时间
				categories: [],
				// 线上金额
				xianshangAmount: [],
				// 线下金额
				xianxiaAmount: [],
				// 在线金额
				zaixianAmount: [],
				// 商品数据统计金额
				goods_consumption_data: [],
				// 用户数量统计
				user_count: [],
				//套餐数据统计金额 
				package_consumption_data: [],
				categoriesConsumption: [],
				// 用户x分类
				categoriesUser: [],
				consumptionData: null,
				userEcharData: null,
				// 数据明细
				dataDetails: [{
						number: 251321.32,
						text: '累计充值金额'
					},
					{
						number: 3.00,
						text: '未使用余额'
					},
					{
						number: 18000,
						text: '累计充值订单'
					},

				],
				// 消费统计
				consumptionDataDetails: [{
						number: 251321.32,
						text: '商城消费(元)'
					},
					{
						number: 3.00,
						text: '套餐消费(元)'
					},
					{
						number: 18000,
						text: '线下消费(元)'
					},

				],
				// 用户统计
				userDataDetails: [{
						number: 251321.32,
						text: '累计用户'
					},
					{
						number: 3.00,
						text: '今日新增'
					},
					{
						number: 18000,
						text: '本月新增'
					},

				],
				orderStatusArr: [{
						value: '今日'
					},
					{
						value: '本月'
					},

					{
						value: '自定义'
					},

				],

				// 其他配置
				otherNavigationList: [{
						img: '../../static/会员卡管理端/组合 550.png',
						text: '在线支付',
						number: '6666'

						// url: '/pages/statistics/index/index'
					},
					{
						img: '../../static/会员卡管理端/组合 551.png',
						text: '线上扫码',
						number: '6666'
						// url: '/pages/merchantConfiguration/merchantConfiguration',

					},
					{
						img: '../../static/会员卡管理端/组合 552.png',
						text: '线下支付',
						number: '666688'

						// url: '/pages/withdrawal/withdrawa-account/withdrawa-account'
					},



				],
				form: {
					start_time: "",
					end_time: "",
					consumption_start_time: "",
					consumption_end_time: "",
					user_start_time: '',
					user_end_time: "",
					type: '',
					uesr_type: '',
					consumption_type: ''
				},
				currentMoment: '',
				endMoment: '',
				pickerVisable: false,
				// 1 为充值 2 为消费 3用户
				customType: null,
				token: uni.getStorageSync('login').token,
				chartData: {},
				rechargeStatistics: null,
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					dataLabel: false,

					dataPointShape: false,
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 4,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							min: 0,
							// max: 1
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow",
							linearType: "custom",
							onShadow: true,
							animation: "horizontal"
						}
					}
				}

			}
		},
		onLoad() {
			this.initialization()
		},

		updated() {
			// this.rechargeStatisticsFn()
		},
		methods: {
			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;

			},
			changeItem(item) {
				console.log(item)
				// if (item == 'selsectCode') {
				// 	console.log('弹出二维码')
				// } else {
				// 	this.currentIndex = item
				// }


			},
			initialization() {

				this.currentMoment = moment();
				this.currentMoment.startOf('day');

				const currentDate = this.currentMoment.format('YYYY-M-D HH:mm:ss');
				console.log(currentDate)
				this.form.start_time = currentDate
				this.form.consumption_start_time = currentDate
				this.form.user_start_time = currentDate
				this.form.type = 1
				this.form.uesr_type = 1
				this.form.consumption_type = 1
				this.endMoment = moment();

				// 获取当天的最后一秒
				this.endMoment.endOf('day');
				const endDate = this.endMoment.format('YYYY-M-D HH:mm:ss');
				console.log(endDate)
				this.form.end_time = endDate
				this.form.consumption_end_time = endDate
				this.form.user_end_time = endDate
				this.rechargeStatisticsFn()
			},
			switchTimeTab(index, type, item) {


				if (type == 'recharge') {
					this.currentIndex = index;
				} else if (type == 'consumption') {
					this.consumptionIndex = index;
				} else {
					this.uesrIndex = index;
				}
				console.log(type)
				if (index == 0 && item.value == '今日') {
					if (type == 'recharge') {
						this.form.type = 1
						this.currentMoment = moment();
						this.currentMoment.startOf('day');

						const currentDate = this.currentMoment.format('YYYY-M-D HH:mm:ss');
						console.log(currentDate)
						this.form.start_time = currentDate

						this.endMoment = moment();

						// 获取当天的最后一秒
						this.endMoment.endOf('day');
						const endDate = this.endMoment.format('YYYY-M-D HH:mm:ss');
						console.log(endDate)
						this.form.end_time = endDate
						this.rechargeStatisticsFn()
					} else if (type == 'consumption') {
						this.form.consumption_type = 1
						this.currentMoment = moment();
						this.currentMoment.startOf('day');

						const currentDate = this.currentMoment.format('YYYY-M-D HH:mm:ss');
						console.log(currentDate)
						this.form.consumption_start_time = currentDate

						this.endMoment = moment();

						// 获取当天的最后一秒
						this.endMoment.endOf('day');
						const endDate = this.endMoment.format('YYYY-M-D HH:mm:ss');
						console.log(endDate)
						this.form.consumption_end_time = endDate
						this.rechargeStatisticsFn()
					} else {
						this.form.uesr_type = 1
						this.currentMoment = moment();
						this.currentMoment.startOf('day');

						const currentDate = this.currentMoment.format('YYYY-M-D HH:mm:ss');
						console.log(currentDate)
						this.form.user_start_time = currentDate

						this.endMoment = moment();

						// 获取当天的最后一秒
						this.endMoment.endOf('day');
						const endDate = this.endMoment.format('YYYY-M-D HH:mm:ss');
						console.log(endDate)
						this.form.user_end_time = endDate
						this.rechargeStatisticsFn()
					}


				} else if (index == 1 && item.value == '本月') {
					type == 'recharge' ? this.form.type = 2 : type == 'consumption' ? this.form.consumption_type = 2 : this
						.form.uesr_type = 2

					this.currentMoment = moment();
					this.currentMoment.startOf('month');;

					const currentDate = this.currentMoment.format('YYYY-M-D HH:mm:ss');
					console.log('本月', currentDate)
					if (type === 'recharge') {
						this.form.start_time = currentDate;
					} else if (type === 'consumption') {
						this.form.consumption_start_time = currentDate;
					} else {
						this.form.user_start_time = currentDate;
					}
					// type == 'recharge' ? this.form.start_time : type == 'consumption' ? this.form.consumption_start_time :
					// 	this.form.user_start_time = currentDate
					// this.form.start_time = currentDate
					console.log(this.form.start_time, type)
					this.endMoment = moment();

					// 获取当天的最后一秒
					this.endMoment.endOf('day');
				
					const endDates = this.endMoment.format('YYYY-M-D HH:mm:ss');
					if (type === 'recharge') {
						this.form.end_time = endDates;
					} else if (type === 'consumption') {
						this.form.consumption_end_time = endDates;
					} else {
						this.form.user_end_time = endDates;
					}
					// type == 'recharge' ? this.form.end_time : type == 'consumption' ? this.form.consumption_end_time : this
					// 	.form.user_end_time = endDates
					console.log(endDates)
					console.log(this.form)
					this.rechargeStatisticsFn()

				} else {
					console.log('自定义')
					// 1 为充值 2 为消费 3用户
					type == 'recharge' ? this.customType = 1 : type == 'consumption' ? this.customType = 2 :
						this.customType = 3
					console.log(this.customType, type)
					this.openPicker()
				}

			},
			async rechargeStatisticsFn() {
				console.log(this.form)
				// 调用数据统计接口
				const result = await this.$http.post({
					url: this.$api.rechargeStatistics,
					data: {
						...this.form

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {

					this.rechargeStatistics = result.data
					console.log(result.data)
					// dataDetails: [{
					// 		number: 251321.32,
					// 		text: '累计充值'
					// 	},
					// 	{
					// 		number: 3.00,
					// 		text: '未使用余额'
					// 	},
					// 	{
					// 		number: 18000,
					// 		text: '累计订单'
					// 	},

					// ],
					this.dataDetails.forEach((item) => {
						switch (item.text) {
							case '累计充值金额':
								item.number = result.data.total_recharge;
								break;
							case '未使用余额':
								item.number = result.data.balance;
								break;
							case '累计充值订单':
								item.number = result.data.recharge_count;
								break;
								// 可根据实际情况继续添加其他匹配条件
						}
					})
					// 充值统计
					this.categoriesRecharge = result.data.xianxia.map((item) => {
						return item.datetime
					})
					this.otherNavigationList.forEach((item) => {
						switch (item.text) {
							case '在线支付':
								item.number = result.data.zaixianAmount;
								break;
							case '线下支付':
								item.number = result.data.xianxiaAmount;
								break;
							case '线上扫码':
								item.number = result.data.xianshangAmount;
								break;
								// 可根据实际情况继续添加其他匹配条件
						}
					})


					this.xianshangAmount = result.data.xianshang.map((item) => {
						return item.amount
					})
					this.xianxiaAmount = result.data.xianxia.map((item) => {
						return item.amount
					})
					this.zaixianAmount = result.data.zaixian.map((item) => {
						return item.amount
					})
					this.getServerData();
					// 消费统计
					this.categoriesConsumption = result.data.goods_consumption_data.map((item) => {
						return item.datetime
					})
					this.consumptionDataDetails.forEach((item) => {
						switch (item.text) {
							case '商城消费(元)':
								item.number = result.data.goods_consumption_amount;
								break;
							case '套餐消费(元)':
								item.number = result.data.package_consumption_amount;
								break;
							case '线下消费(元)':
								item.number = result.data.xianxia_consumption;
								break;
								// 可根据实际情况继续添加其他匹配条件
						}
					})

					this.goods_consumption_data = result.data.goods_consumption_data.map((item) => {
						return item.amount
					})
					this.package_consumption_data = result.data.package_consumption_data.map((item) => {
						return item.amount
					})

					this.getConsumptionData();
					// 用户统计
					this.userDataFn()
					this.categoriesUser = result.data.user_count.map((item) => {
						return item.datetime
					})
					this.userDataDetails.forEach((item) => {
						switch (item.text) {
							case '累计用户':
								item.number = result.data.total_user_count;
								break;
							case '今日新增':
								item.number = result.data.today_user_count;
								break;
							case '本月新增':
								item.number = result.data.month_user_count;
								break;
								// 可根据实际情况继续添加其他匹配条件
						}
					})
					this.user_count = result.data.user_count.map((item) => {
						return item.count
					})

				} else {
					this.$sun.toast(result.msg, 'none')
				}

			},
			// 用户统计
			userDataFn() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: this.categoriesUser,
						series: [{
								name: "用户数量",
								linearColor: [
									[
										0,
										"#1890FF"
									],
									
								],
								setShadow: [
									3,
									8,
									10,
									"#1890FF"
								],
								data: this.user_count
							},


						]
					};
					this.userEcharData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			// 消费数据
			getConsumptionData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: this.categoriesConsumption,
						series: [{
								name: "商品消费统计",
								linearColor: [
									[
										0,
										"#1890FF"
									],
									
								],
								setShadow: [
									3,
									8,
									10,
									"#1890FF"
								],
								data: this.goods_consumption_data
							},
							{
								name: "套餐消费统计",
								linearColor: [
									
									[
										1,
										"#FA7D8D"
									]
								],
								setShadow: [
									
									8,
									
									"#FA7D8D"
								],
								data: this.package_consumption_data
							},

						]
					};
					this.consumptionData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			// 充值统计
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: this.categoriesRecharge,
						series: [{
								name: "线下充值",
								linearColor: [
									[
										0,
										"#1890FF"
									],
									
								],
								setShadow: [
									3,
									8,
									10,
									"#1890FF"
								],
								data: this.xianxiaAmount
							},
							{
								name: "线上充值",
								linearColor: [
									
									[
										1,
										"#90F489"
									]
								],
								setShadow: [
									3,
									8,
									10,
									"#90F489"
								],
								data: this.xianshangAmount
							},
							{
								name: "在线充值",
								linearColor: [
									[
										0,
										"#FAC858"
									],
									
								],
								setShadow: [
									3,
									8,
									10,
									"#FAC858"
								],
								data: this.zaixianAmount
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			openPicker() {
				this.pickerVisable = true;
			},
			confirm(e) {

				console.log('点击确定按钮，返回当前选择的值', e); // ['2021-06-01', '2021-07-01']
				console.log('打印所有的范围日期e', e);
				this.startDate = e[0];
				// this.startDate = e[0]+'-'+e[1];

				if (this.customType == 1) {
					this.form.type = 3
					Object.assign(this.form, {
						start_time: e[0] + ' 00:00:00',
						end_time: e[1] + ' 23:59:59'
					});
				} else if (this.customType == 2) {
					this.form.consumption_type = 3
					Object.assign(this.form, {
						consumption_start_time: e[0] + ' 00:00:00',
						consumption_end_time: e[1] + ' 23:59:59'
					});
				} else {
					this.form.uesr_type = 3
					Object.assign(this.form, {
						user_start_time: e[0] + ' 00:00:00',
						user_end_time: e[1] + ' 23:59:59'
					});
				}
				this.rechargeStatisticsFn()


			},
		},
		// watch: {
		// 	tabListNum: {
		// 		immediate: true,
		// 		handler(newValue, oldValue) {
		// 			// 在值发生变化时执行操作
		// 			console.log('数值发生变化：', newValue);
		// 			if (newValue == 3 || newValue == 4) {
		// 				this.showMiddleButtonBar = false
		// 			}
		// 		},
		// 	},
		// },
		computed: {
			totelName: function() {
				return function(nums) {
					console.log(nums)
					let num
					if (nums.endsWith(".00")) {
						num = nums.slice(0, -3); // 去除末尾的 ".00"
					}
					if (nums >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {
						console.log(nums)
						return num ? num : nums;
					}
				};
			},
		},

	}
</script>

<style lang="less" scoped>
	page {
		background: #ffffff;
	}

	.dataCenter {
		margin-bottom: 60rpx;


		.backgroundImage {
			background: rgb(81, 102, 246);
			width: 750rpx;
			height: 344rpx;
			padding: 40rpx;
		}

		.dataCenterContainer {
			padding: 38rpx 30rpx;
			margin-top: -18rpx;
			border-radius: 20rpx;
			height: 164rpx;
			background: rgb(255, 255, 255);

			.rechargeStatistics {
				.line {
					width: 8rpx;
					height: 34rpx;
					background: rgb(108, 133, 252);
				}

				.selectTime {


					.tab {

						list-style-type: none;
						margin-right: 20rpx;
						display: block;
						width: 106rpx;
						height: 44rpx;
						line-height: 44rpx;

						border: 1px solid rgb(239, 239, 239);
						text-align: center;
						background: rgb(255, 255, 255);
						color: rgb(153, 153, 153);
					}

					.active {
						width: 106rpx;
						height: 44rpx;

						background: rgb(108, 133, 252);
						color: rgb(255, 255, 255);
						;
						text-align: center;
						line-height: 44rpx;
					}

					.orderStatus {
						width: 90px;
						height: 50rpx;
						text-align: center;
						line-height: 50rpx;
						font-weight: 700;

					}




				}
			}

			.consumerStatistics {


				border-radius: 10px;

				background: rgb(243, 249, 255);
				padding: 36rpx 46rpx;
			}

			.avaterIcon {
				width: 72rpx;
				height: 72rpx;
				margin-bottom: 16rpx;
			}

			.infoBox {
				width: 25%;
				margin-bottom: 30rpx;
			}
		}

	}
</style>